<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="provice" onchange="chenge_city(this)">
    <option>选择省份</option>
</select>
<select id="city">
    <option>选择城市</option>
</select>
<select id="xian">
     <option>选择地区</option>
</select>

<script>
    var data = {'北京':['朝阳','东城','昌平'],'上海':['浦东','普陀'],'河南':['郑州','洛阳','南阳']}
    var pro = document.getElementById('provice')
    var city = document.getElementById('city')
    var child = city.childElementCount

    var xian = document.getElementById('xian')

    for (var i in data){
        sheng = document.createElement("option")
        sheng.innerHTML=i
        pro.appendChild(sheng)
    }

    function  chenge_city(self) {
//        city.children.length = 0
//        del_note(self.value)   //调用删除城市函数
        while (city.children.length>1){  //如果city节点元素大于1，删除最后一个
            city.removeChild(city.lastElementChild)
        }

        for(var k in data[self.value]){
//            alert(self.value)得到选择的省份
            c= document.createElement('option')
            c.innerHTML=data[self.value][k]
            city.appendChild(c)
        }
//        alert(city.children.length)
//        city.children.length   得到city子节点元素的个数
    }

    function del_note(sh) {  //遍历节点元素删除
        for (var i = data[sh].length - 1; i >=0; i--) {
            console.log(data[sh][i])   //要删除的内容
//            city.childNodes  //标准用法，获取city下所有子节点，包含文本节点
//            city.children  //非标准用法，获取city下所有子元素节点，不包含文本节点
               console.log(city.children[i])
//            city.removeChild(city.children[i])

//              console.log(city)
        }
    }

</script>
</body>
</html>